<template>
    <!-- 编辑订单页面 -->
    <!-- 公共组件：用于显示页面顶部，因为有可能从新增页面跳转过来的也有可能是从编辑按钮跳转过来的，因此 -->
    <Header :title="address" />
    <div class="arearess">
        <!-- 参数说明 -->
        {{  isshow}}

        <van-address-edit :area-list="areaList" :show-delete="isshow" show-set-default
            :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="onDelete"
            :address-info="addressinfo" />


    </div>
</template>
<script>
import { defineComponent, reactive, toRefs, onMounted, computed, onBeforeMount } from 'vue';
import Header from '../../../components/Store_header.vue'
import { useStore } from 'vuex';
import { useRouter, useRoute } from 'vue-router';
import { showToast } from 'vant';
import mitter from '../../../common/js/mit';

export default defineComponent({
    name: 'App',
    components: {
        Header
    },
    setup() {
        const store = useStore();
        const route = useRoute();
        const router = useRouter();
        const len = route.query.len

        const data = reactive({
            isshow: true,
            addressinfo: {},
            //地区列表 ，给编辑地址的卡片的三级联动提供数据来源，
            areaList: {
                // 110000：省，加100：市，加1：区
                province_list: {
                    110000: "黑龙江省",
                    120000: "辽宁省",
                },
                city_list: {
                    110100: "哈尔滨市",
                    110200: "大庆市",
                    120100: "沈阳市",
                    120200: "大连市",
                },
                county_list: {
                    110101: "南岗区",
                    110102: "香坊区",
                    120102: "铁西区",
                    120202: "旅顺口区",
                },

            },

        })
        // 使用计算机属性，通过从路由中传过来的type数据来判断是从哪里跳转过来的
        const address = computed(() => {
            return route.query.type === 'add' ? "新增地址" : "地址编辑"
        })
        // 初始化，获取点击编辑按钮的那个地址的id同vuex中存放地址的id进行遍历判断，相当于获取这个id的地址的完整的数据，然后为页面提供响应式数据
        const init = () => {
                store.state.userAddress.forEach(item => {
                    if (item.id === Number(route.query.id)) {
                        data.addressinfo = item;
                    }
                });
        }
        // 当点击编辑按钮跳转到这个页面，这个组件挂载之后对数据进行初始化，将点击的那个地址的数据默认显示出来然后再进行修改
        onMounted(() => {
            init()

        })
        // 当点击新增地址时不显示删除按钮
        const panduan1 = () => {
            if (!route.query.type === "add"  ) { 
               data.isshow = false
            }
            else {
                if(store.state.userAddress.length-0 ===1){
                    data.isshow = false
                    return
                }
                data.isshow = true
            }
        }
        // 在组件创建之前之后运行，
        panduan1()

        //点击保存按钮，Vant也会返回要保存的数据，这时要判断是要新增的数据还是在原来的数据进行编辑的
        const onSave = (content) => {
            // 判断是否是新增地址
            if (route.query.type == 'add') {
                // 判断在vuex存储地址的长度是否为0
                if (store.state.userAddress.length) {
                    // 不为0就获取数据中最有一个地址的id加1作为新地址的id
                    content.id = Number(store.state.userAddress[store.state.userAddress.length - 1].id) + 1
                } else {
                // 如果为0，就说明数组中没有数据，就作为第一个数据存储
                    content.id = 1001
                }
                // 然后将数据传给vuex添加处理

                store.commit("ADDADDRESS", content)
                // 否则就是编辑地址，将数据传给vuex作编辑更新数据处理
            } else {
                store.commit("CHANGEADDRESS", content)

            }
            showToast("保存成功")
            setTimeout(() => {
                router.back()
            }, 1000)

        }
        // 点击删除按钮时，VAnt提供的api会提供删除地址的数据然后，通过使用commit方法将要删除的数据传输给vuex进行处理，然后使用请提示，延时1秒执行返回
        const onDelete = (content) => {
            store.commit('DELETEADDRESS', content);
            showToast("删除成功")
            setTimeout(() => {
                router.back()
            }, 1000)
       }
        return {
            ...toRefs(data),
            onSave,
            onDelete,
            address,
            store

        }

    }

})
</script>